[inject templates/en.xd]
[add-to-head
  [<script> type="module"; [pass-raw
import Q from"/scripts/q.min.js";Q(document.body,{u1:6,u2:3,v1:2,v2:5})
  ]]
]
[style
  [rule .inputs;
    [: display; flex]
    [: flex-flow; row wrap]
  ]
  [rule .input-container;
    [: width; 20rem]
    [: display; flex]
    [: flex-flow; column nowrap]
  ]
  [rule label;
    [: font-family; [var sans-serif]]
  ]
]
[set-title Determinant Visualization | xigoi]
[show-title Determinant Visualization]
[<div> .inputs;
  [<div> .input-container;
    [<input> #u1; q-model="u1"; type="range"; min="-10"; max="10"]
    [<label> for="u1"; q-html="`u<sub>1</sub> = ${u1}`";]
  ]
  [<div> .input-container;
    [<input> #u2; q-model="u2"; type="range"; min="-10"; max="10"]
    [<label> for="u2"; q-html="`u<sub>2</sub> = ${u2}`";]
  ]
  [<div> .input-container;
    [<input> #v1; q-model="v1"; type="range"; min="-10"; max="10"]
    [<label> for="v1"; q-html="`v<sub>1</sub> = ${v1}`";]
  ]
  [<div> .input-container;
    [<input> #v2; q-model="v2"; type="range"; min="-10"; max="10"]
    [<label> for="v2"; q-html="`v<sub>2</sub> = ${v2}`";]
  ]
]
[<svg> width="360"; height="360"; viewBox="-12 -12 24 24"; version="1.1"; xmlns="http://www.w3.org/2000/svg";
  [<rect> q-bind:x="Math.min(0,u1)"; q-bind:y="-Math.max(0,v2)"; q-bind:width="Math.abs(u1)"; q-bind:height="Math.abs(v2)"; fill="#080" opacity="0.5"]
  [<rect> q-bind:x="Math.min(0,v1)"; q-bind:y="-Math.max(0,u2)"; q-bind:width="Math.abs(v1)"; q-bind:height="Math.abs(u2)"; fill="#800" opacity="0.5"]
  [<path> #axes; d="M-11 0L11 0M0 -11L0 11"; stroke="#fff"; stroke-width="0.2";]
  [<path> #u; q-bind:d="`M0 0L${u1} ${-u2}M${v1} ${-v2}L${+u1+ +v1} ${-u2-v2}`"; stroke="#f80"; stroke-width="0.2";]
  [<path> #v; q-bind:d="`M0 0L${v1} ${-v2}M${u1} ${-u2}L${+u1+ +v1} ${-u2-v2}`"; stroke="#80f"; stroke-width="0.2";]
]
